<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	AddItems
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

	<h2>AddItems</h2>
	
	<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>

	<% using (Html.BeginForm()) {%>

		<fieldset>
			<legend>Specify Menu Items</legend>
			<p>
				<label>Menu Items</label>
				<%=Html.Hidden("selectedItems") %>
				<table>
					<thead>
						<th>Selected Items</th>
						<th></th>
					</thead>
					<tbody id="items_table"></tbody>
					<tfoot>
						<div style="white-space:nowrap;">
							<%=Html.DropDownList("availableItems") %>
							<input type="button" id="add_item" value="Add Item" />
						</div>
					</tfoot>
				</table>
				
				<script type="text/javascript">
				
					jQuery.fn.sort = function() {
						return this.pushStack( [].sort.apply( this, arguments ), []);
					};

					$(document).ready(function() {

						// sort options
						$("#availableItems option").sort(function(a, b) {
							return a.innerHTML > b.innerHTML ? 1 : -1;
						}).remove().appendTo("#availableItems"); 

						// add item click
						$("#add_item").click(function(event) {
							var selectedItemValue = $("#availableItems").val();
							var selectedItemText = $("#availableItems option:selected").text();

							if (selectedItemValue != undefined) {
								var deleteButton = '<input type="button" class="deleteItemButton" onclick="deleteItem(' + selectedItemValue + ');">X</input>';
								$("#selectedItems").value += "," + selectedItemValue;
								$("#items_table").append("<tr id=\"row" + selectedItemValue + "\"><td>" + selectedItemText + "</td><td>" + deleteButton + "</td></tr>");
								$("#availableItems option:selected").remove();
							}
						});
					});

					function deleteItem(id) {
						
						$("#row" +id).remove();
					}
					
				</script>
			</p>
			<p>
				<input type="submit" value="Finish" />
			</p>
		</fieldset>

	<% } %>

	<div>
		<%=Html.ActionLink("Back to List", "Index") %>
	</div>

</asp:Content>
